<template>
   <!--ref可以用来获取HTML元素，同时也能获取子组件-->

  <div class="goods">
    <div class="menu-goods" ref="menusWrapper">
      <ul >
        <li v-for="(item,index) in goods" class="goodsName" :class="{'current':currentIndex === index}" @click="selectMenu(index,$event)">
           <span class="text border-1px">
             <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="list-goods" ref="foodWrapper">
      <ul>
        <li v-for="item in goods" class="foods-list food-current" :key="goods.id">
          <h1 class="title">{{item.name}}</h1>
          <div class="list-item" v-for="food in item.foods" :key="food.id" @click.stop="clickFood(food,$event)">
              <span class="icon">
                <img :src="food.icon" width="57" height="57"/>
              </span>
              <div class="content" >
                  <span class="name" >{{food.name}}</span>
                  <span class="description" >
                      {{food.description}}
                     </span>
                  <span class="count">
                      月售{{food.sellCount}}份&nbsp;&nbsp;&nbsp;&nbsp;好评率{{food.rating}}%
                    </span>
                  <span class="price">
                        <span class="new">￥{{food.price}}</span>
                        <span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
                    </span>
                    <div class="cartcontrol-wrapper">
                      <!--监听v-on:cartAdd="cartAdd"，购物车组件如果提交了'cartAdd'事件就调用这个cartAdd函数-->
                      <cartcontrol :food="food" @cartAdd="onCartAdd" ></cartcontrol>
                    </div>
              </div>
          </div>
        </li>
      </ul>
    </div>
    <shopcart ref="shopCart"
              :deliveryPrice="seller.deliveryPrice"
              :minPrice="seller.minPrice"
              :select-foods="selectFoods"></shopcart>
    <food :food="choiceFood" ref="food"></food>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import shopcart from "../../components/shopcart/shopcart";
  import cartcontrol from "../../components/cartcontrol/cartcontrol"
  import food from "../../components/food/food"
  const ERR_OK = 0;
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    mounted(){
      // console.log(this.seller)
    },
    data() {
      return {
        goods: [],//用来接收从后台返回的数据
        listHeight: [], //存放右边每一个大区块的高度
        scrollY : 0,//实时滚动的y轴大小，利用better-scroll的onScroll事件监听这个值
        choiceFood:{}//存放clickFood点击后food信息
      }
    },
    components:{
      shopcart,
      cartcontrol,
      food
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.$http.get('/api/goods').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.goods = response.data;
          this.$nextTick(() => {
            this._initScroll();
            this._calculateHeight()
          })
        }
      })
    },
    methods: {
      //点击左边的menu，跳到右边相应的li
      selectMenu(index,event){
        //浏览器的事件对象是没有_constructed属性，当是浏览器触发的时候就return
        //而用better-scroll自定义的事件触发的时候有这个属性，为true
        //用这个属性，就是避免在浏览器点击的时候，触发两次点击的效果
        if(!event._constructed){
          return ;
        }
        // console.log(index);
        //点击左侧的菜单项的时候，右边跳到相应的内容区域
        let listHeight = this.$refs.foodWrapper.getElementsByClassName('food-current');
        let el = listHeight[index];//根据index，获取到右边具体滚动到的li
        // console.log(el);
        this.fooodScroll.scrollToElement(el,300);//要滑动到右边的对象，300完成动作的时间
      },

      clickFood(food,event) {
        if(!event._constructed){
          return ;
        }
        this.choiceFood = food
        this.$refs.food.show()
      },
      onCartAdd(el){
        // console.log(el)
        //cartcontrol点击事件将cartcontrol里面要 传递的东西传递给refs里就是shopcart里drop方法面
        this.$refs.shopCart.drop(el);
      },

      _initScroll() {
        this.scroll = new BScroll(this.$refs.menusWrapper, {
          //better-scroll会监听on之类的事件时阻止默认事件   所以需要有点击事件
          click:true
        });
        this.fooodScroll = new BScroll(this.$refs.foodWrapper, {
          click:true,
          probeType:3 //设置实时监听scroll滚动的位置的效果的属性
        });
        //监听右侧滚动区域，左边相应的menu高亮
        //监听滚动事件scroll，实时改变this.scrollY的值，
        // pos是元素所处的位置，内部自动传的
        this.fooodScroll.on('scroll',(pos) => {
          // console.log(pos);   获得滚动的实时X值和Y值
          this.scrollY = Math.abs(Math.round(pos.y));
          // console.log(this.scrollY)
        })

      },
      _calculateHeight() {
        let listHeight = this.$refs.foodWrapper.getElementsByClassName('food-current');
        // console.log(listHeight)
        // console.log(listHeight.length)
        let height = 0;
        this.listHeight.push(height)
        for(let i = 0 ; i<listHeight.length;i++){
          // 计算各个区块的高度
          let item = listHeight[i];
          // console.log(item)
          height += item.clientHeight;
          // console.log(height)
          this.listHeight.push(height)
        }
        // console.log(this.listHeight)
      }
    },
    computed: {
      //利用vue中的计算属性computed实时计算，对listHeight遍历，返回当前的左边menu-wrapper的li
      //对应的index，从而让其显示高亮的属性.current
      currentIndex() {
        for(let i=0; i< this.listHeight.length;i++){
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i+1];
          if(!height2 || (this.scrollY>=height1 && this.scrollY < height2)){
            return i;
          }
        }
        //默认情况下是返回第一个元素
        return 0;
      },
      //将goods与shopcart连接
      selectFoods() { //通过cartciontrol里面的addCount的vue.set给food添加上了count属性
        let foods = [];
        this.goods.forEach((good) => {
          // console.info(good)
          good.foods.forEach((food) => {
            // console.log(food)
            if(food.count){
              foods.push(food)
            }
          })
        })
        return foods
        // console.log(foods)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
  .goods
    display flex
    position absolute
    width 100%
    top: 174px
    bottom 46px
    overflow hidden
    .menu-goods
      flex: 0 0 80px
      background-color #f3f5f7
      width 80px
      .goodsName
        height 54px
        width 56px
        line-height 14px
        display table
        padding: 0 12px
        &.current
          background-color #fff
          margin-top -1px
          z-indx 10

        .icon
          display inline-block
          width 12px
          height 12px
          margin-right 2px
          background-size 12px 12px
          background-repeat no-repeat
          vertical-align top
          &.decrease
            bg-image('decrease_3')
          &.discount
            bg-image('discount_3')
          &.guarantee
            bg-image('guarantee_3')
          &.invoice
            bg-image('invoice_3')
          &.special
            bg-image('special_3')
      .text
        display table-cell
        vertical-align middle
        width 56px
        font-size 12px
        border-1px(rgba(7, 17, 27, 0.1))
    .list-goods
      flex 1
      .foods-list
        .title
          height 26px
          background-color #f3f5f7
          line-height 26px
          font-weight 700
          font-size 12px
          color rgb(147, 153, 159)
          border-left 2px solid #d9dde1
          padding-left 14px
        .list-item
          display flex
          padding 12px
          border-1px(rgba(7, 17, 27, 0.1))
          &:last-child
            border-none()
          .icon
            flex 0 0 57px
            margin-right 10px
          .content
            flex 1
            .name
              display block
              font-size 14px
              color rgb(7, 17, 27)
              line-height 14px
              font-weight 700
              margin 2px 0 8px
            .description,
            .count
              display block
              font-size 10px
              line-height 10px
              color: rgb(147, 153, 159)
              margin-bottom 8px
            .price
              font-weight 700
              line-height 24px
              .new
                color #EE1415
                font-size 14px
              .old
                font-size 10px
                color rgb(147, 153, 159)
                margin-left 8px
                text-decoration line-through
            .cartcontrol-wrapper
              position absolute
              bottom 10px
              right:12px

</style>
